<template>
	<view class="guide-container">
		<swiper class="guide-swiper" :indicator-dots="false" :autoplay="false" :circular="false" @change="swiperChange"
			:current="currentIndex">
			<swiper-item>
				<view class="guide-item">
					<image :src="imgUrls[0]" mode="aspectFit"
						class="guide-image"></image>
						<text class="guide-title">创业指导</text>
					<text class="guide-text">项目培训  企业家心得</text>
				</view>
			</swiper-item>

			<swiper-item>
				<view class="guide-item" @touchstart="touchStart" @touchmove="touchMove" @touchend="touchEnd">
					<image :src="imgUrls[1]" mode="aspectFit"
						class="guide-image"></image>
						<text class="guide-title">就业直通</text>
					<text class="guide-text">技能培训  在线报名</text>
					<!-- 倒计时组件 -->
					<view class="countdown-container" @click="enterApp">
						<view class="countdown-circle">
							<text class="countdown-text">{{ countdown }}</text>
						</view>
						<text class="skip-text">跳过</text>
					</view>
				</view>
			</swiper-item>
		</swiper>

		<view class="dots-container">
			<view class="dot" :class="{ active: currentIndex === 0 }" @click="goToPage(0)"></view>
			<view class="dot" :class="{ active: currentIndex === 1 }" @click="goToPage(1)"></view>
		</view>
	</view>
</template>

<script setup>
import { ref } from 'vue'
import { onLoad, onUnload } from '@dcloudio/uni-app'
import config from '@/static/config.js'

// 响应式数据
const imgUrls = ref([
config.imgUrl + '/img/img20902918b2d0aa028.png',
config.imgUrl + '/img/img20904118b2d18a9e8.png'
])
const currentIndex = ref(0)
const countdown = ref(5) // 倒计时5秒
const countdownInterval = ref(null)
const Swiper_down = ref(false) // 标记是否已经滑动到第二页
const isTransitioning = ref(false) // 标记是否正在跳转
const startX = ref(0) // 触摸开始位置
const startY = ref(0) // 触摸开始位置
const isSliding = ref(false) // 是否正在滑动


// 方法
const swiperChange = (e) => {
	currentIndex.value = e.detail.current

	// 当滑动到第二页时启动倒计时
	if (currentIndex.value === 1) {
		startCountdown()
		Swiper_down.value = true // 标记已经滑动到第二页
	} else {
		// 如果离开第二页，清除倒计时
		clearCountdown()
	}
}

// 触摸开始事件
const touchStart = (e) => {
	// 只在第二页监听触摸事件
	if (currentIndex.value !== 1) return
	
	startX.value = e.touches[0].clientX
	startY.value = e.touches[0].clientY
	isSliding.value = true
}

// 触摸移动事件
const touchMove = (e) => {
	// 只在第二页监听触摸事件
	if (currentIndex.value !== 1 || !isSliding.value) return
	
	const currentX = e.touches[0].clientX
	const currentY = e.touches[0].clientY
	const deltaX = currentX - startX.value
	const deltaY = currentY - startY.value
	
	// 判断是否向左滑动
	// 水平滑动距离大于垂直滑动距离，且向左滑动距离足够大
	if (Math.abs(deltaX) > Math.abs(deltaY) && deltaX < -50) {
		// 向左滑动，触发跳转
		if (!isTransitioning.value) {
			isTransitioning.value = true
			isSliding.value = false
			enterApp()
		}
	}
}

// 触摸结束事件
const touchEnd = (e) => {
	isSliding.value = false
}

const goToPage = (index) => {
	currentIndex.value = index
	// 如果跳转到第二页，启动倒计时
	if (index === 1) {
		startCountdown()
		Swiper_down.value = true // 标记已经滑动到第二页
	} else {
		// 如果离开第二页，清除倒计时
		clearCountdown()
	}
}

const startCountdown = () => {
	// 先清除可能存在的旧计时器
	clearCountdown()

	// 重置倒计时
	countdown.value = 5

	// 启动新计时器
	countdownInterval.value = setInterval(() => {
		countdown.value--

		if (countdown.value <= 0) {
			clearCountdown()
			enterApp()
		}
	}, 1000)
}

const clearCountdown = () => {
	if (countdownInterval.value) {
		clearInterval(countdownInterval.value)
		countdownInterval.value = null
	}
}

const enterApp = () => {
	// 清除倒计时
	clearCountdown()

	// 检查是否已登录
	const userinfo = uni.getStorageSync('userinfo');
	if (!userinfo) {
		// 未登录，跳转到登录页
		uni.redirectTo({
			url: '/pages/login/login'
		})
	} else {
		// 已登录，进入首页
		uni.reLaunch({
			url: '/pages/index/index'
		})
	}
}

// 新增：检查是否需要显示引导页
const checkAndRedirect = () => {
	// 获取是否已经显示过引导页的标记
	const hasShownGuide = uni.getStorageSync('hasShownGuide');
	
	if (!hasShownGuide) {
		// 首次使用应用，保留在引导页
		// 设置标记表示已经显示过引导页
		uni.setStorageSync('hasShownGuide', true);
	} else {
		// 非首次使用，检查登录状态
		const userinfo = uni.getStorageSync('userinfo');
		if (userinfo) {
			// 已登录，直接跳转到首页
			uni.reLaunch({
				url: '/pages/index/index'
			});
		}
	}
}

onLoad(() => {
	// 检查是否需要直接跳转
	checkAndRedirect();
	
	// 页面加载时检查是否需要启动倒计时（如果默认在第二页）
	if (currentIndex.value === 1) {
		startCountdown();
		Swiper_down.value = true;
	}
}),
onUnload(() => {
	// 组件销毁前清除计时器
	clearCountdown()
})
</script>

<style>
.guide-container {
	width: 100%;
	height: 100vh;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	background-color: #fff;
	position: relative;
}

.guide-swiper {
	width: 100%;
	height: 70%;
}

.guide-item {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	height: 100%;
	padding: 40rpx;
	box-sizing: border-box;
	position: relative;
}

.guide-image {
	width: 76%;
	height: 60%;
	margin-bottom: 40rpx;
}

.guide-title{
	font-size: 50rpx;
	font-weight: bold;
	color: #333;
	text-align: center;
	margin-bottom: 20rpx;
	white-space: pre-line;
}

.guide-text {
	font-size: 34rpx;
	color: #333;
	text-align: center;
	margin-bottom: 60rpx;
	white-space: pre-line;
	line-height: 60rpx;
}

.dots-container {
	display: flex;
	justify-content: center;
	margin-top: 40rpx;
}

.dot {
	width: 110rpx;
	height: 6rpx;
	background-color: #ccc;
	margin: 0 10rpx;
	border-radius: 5px;
	transition: all 0.3s ease;
}

.dot.active {
	background-color: rgba(255, 141, 26, 1);
	width: 110rpx;
}

/* 倒计时样式 */
.countdown-container {
	position: absolute;
	top: 25rpx;
	right: 40rpx;
	display: flex;
	flex-direction: column;
	align-items: center;
	z-index: 10;
}

.countdown-circle {
	width: 80rpx;
	height: 80rpx;
	background-color: rgba(0, 0, 0, 0.3);
	border-radius: 50%;
	display: flex;
	align-items: center;
	justify-content: center;
}

.countdown-text {
	font-size: 36rpx;
	color: #ffffff;
	font-weight: bold;
}

.skip-text {
	font-size: 24rpx;
	color: #999;
	margin-top: 10rpx;
}

/* 胶囊样式修改 */
.countdown-container {
	position: absolute;
	top: 25rpx;
	right: 40rpx;
	display: flex;
	flex-direction: row;
	align-items: center;
	z-index: 10;
	background-color: rgba(0, 0, 0, 0.3);
	border-radius: 50rpx;
	padding: 10rpx 20rpx;
	cursor: pointer;
}

.countdown-circle {
	width: auto;
	height: auto;
	background-color: transparent;
	border-radius: 0;
	display: flex;
	align-items: center;
	justify-content: center;
	margin-right: 10rpx;
}

.countdown-text {
	font-size: 28rpx;
	color: #ffffff;
	font-weight: bold;
}

.skip-text {
	font-size: 28rpx;
	color: #ffffff;
	margin-top: 0;
	font-weight: bold;
}
</style>